<template>
  <div class="myQuickNax">
    <el-card>
      <template #header>
        <span>快捷导航</span>
      </template>
      <div class="quickNavBody">
        <div class="nav">
          <div class="navTitle">个人</div>
          <div class="navItemContainer">
            <div class="navItem" v-for="item in personNavList" @click="routerTo(item.route)">
              <img :src="item.img"/>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="nav" v-if="companyList.length > 0">
          <div class="navTitle">公司</div>
          <div class="navItemContainer">
            <div class="navItem" v-for="item in companyNavList" @click="toCompanyRoute(item.route, item.companyName)">
              <img :src="item.img"/>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>

import {getSvgPath, handleName, routerTo} from "@/utils/index.js";
import {updateCurrentCompanyName} from "@/composition/useRouterLink.js";
import {useCompanyListRef} from "@/composition/billSys/useAccount.js";

let companyList = useCompanyListRef();

const personNavList = [
  {
    name: '账单',
    route: 'personBill',
    img: getSvgPath('AddBill'),
  },
  {
    name: '账单类型',
    route: 'personBillType',
    img: getSvgPath('Category'),
  }
];

const companyNavListTemplate = [
  {
    name: '账单',
    route: 'companyBill',
    img: getSvgPath('AddBill')
  },
  {
    name: '管理员工',
    route: 'companyUser',
    img: getSvgPath('Employee')
  },
  {
    name: '仓库',
    route: 'companyDepot',
    img: getSvgPath('Depot')
  },
  {
    name: '仓库记录',
    route: 'companyDepotRecord',
    img: getSvgPath('Record')
  },
];
const companyNavList = ref([]);
watchEffect(() => {
  if(companyList.value.length === 0) {
    return;
  }
  let result = [];
  companyList.value.forEach(item => {
    for (let i = 0; i < companyNavListTemplate.length; i++) {
      let it = companyNavListTemplate[i];
      result.push({
        name: handleName(item.name)+ ' / ' + it.name,
        route: it.route,
        img: it.img,
        companyName: item.name
      });
    }
  });
  companyNavList.value = result;
 });

// 前往公司路由时先记录公司的名称， 后续使用
const toCompanyRoute = (route, companyName) => {
  // 更新当前公司名称
  updateCurrentCompanyName(companyName);
  routerTo(route, 20);
};

</script>

<style scoped lang="scss">
.myQuickNax {
  width: 100%;
  height: 100%;
  min-height: 160px;
  overflow: hidden;

  .quickNavBody {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 20px;
    .nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      //height: 40px;
      gap: 20px;
      white-space: nowrap;
      .navItemContainer{
        display: flex;
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 16px;
        align-items: center;
        .navItem {
          width: calc((100% - 80px) / 4);
          display: flex;
          flex-shrink: 0;
          flex-direction: row;
          align-items: center;
          height: 100%;
          gap: 10px;
          padding: 10px;
          border: 1px solid transparent;
          &:hover {
            color: red;
            border: 1px solid $leftNav-text-color;
            border-radius: 5px;
          }
          img {
            height: 16px;
          }
        }
      }
      .navTitle {
        color: $leftNav-bg-active-color;
        align-self: flex-start;
        padding-top: 10px;
      }
    }
  }
}
</style>
